<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
        <div class="flex-1 min-w-0">
            <!-- Breadcrumbs -->
            <div class="flex flex-wrap items-center font-medium">
                <div>
                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
                </div>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                    <a class="ml-1 text-primary-500">Other Components</a>
                </div>
                <div class="flex items-center ml-1 whitespace-nowrap">
                    <mat-icon
                        class="icon-size-5 text-secondary"
                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
                    <span class="ml-1 text-secondary">Common</span>
                </div>
            </div>
            <!-- Title -->
            <div class="mt-2">
                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
                    Messages
                </h2>
            </div>
        </div>
        <button
            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
            mat-icon-button
            (click)="toggleDrawer()">
            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
        </button>
    </div>

    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">

        <p>
            This component can be used to show latest messages in a custom made panel. These messages can be either system wide messages or messages that sent to the currently
            logged in user from other users.
        </p>
        <p>
            It has some basic features including
        </p>
        <ul>
            <li>marking all messages as read</li>
            <li>marking individual messages as read</li>
            <li>removing individual messages from the list</li>
        </ul>

        <h2>Usage</h2>
        <textarea
            fuse-highlight
            lang="html">
            <messages></messages>
        </textarea>

        <h2>Message</h2>
        <!-- @formatter:off -->
        <textarea fuse-highlight
                  lang="typescript">
            export interface Message
            {
                id: string;
                icon?: string;
                image?: string;
                title?: string;
                description?: string;
                time: string;
                link?: string;
                useRouter?: boolean;
                read: boolean;
            }
        </textarea>
        <!-- @formatter:on -->
        <div class="bg-card py-3 px-6 mt-2 rounded shadow">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>id</div>
                        </td>
                        <td>
                            Unique id of the message.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>icon</div>
                        </td>
                        <td>
                            Icon name for the message.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>image</div>
                        </td>
                        <td>
                            Image for the message.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>title</div>
                        </td>
                        <td>
                            Title of the message.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>description</div>
                        </td>
                        <td>
                            Description of the message.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>time</div>
                        </td>
                        <td>
                            String representation of the time of the message (like ISO string).
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>link</div>
                        </td>
                        <td>
                            Link of the message.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>useRouter</div>
                        </td>
                        <td>
                            Whether to use the Router to parse the link.
                        </td>
                    </tr>
                    <tr>
                        <td class="font-mono text-md text-secondary">
                            <div>read</div>
                        </td>
                        <td>
                            Whether the message marked as read.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h2>Messages Service</h2>
        <p>
            The <code>MessagesService</code> can be used to control the messages outside of the <strong>Messages</strong> component. This is particularly useful to control the
            messages from other components for actions like creating, updating or deleting them.
        </p>

        <h3>Methods</h3>
        <p>
            Here's the list of all available methods from <code>MessagesService</code>:
        </p>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                messages$: Observable&lt;Message[]&gt;
            </div>
            <div class="p-6">
                Getter for messages.
            </div>
        </div>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                getAll(): Observable&lt;Message[]&gt;
            </div>
            <div class="p-6">
                Get all messages from the server.
            </div>
        </div>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                create(message: Message): Observable&lt;Message&gt;
            </div>
            <div class="p-6">
                Create a new message on the server.
            </div>
        </div>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                update(id: string, message: Message): Observable&lt;Message&gt;
            </div>
            <div class="p-6">
                Update the message on the server.
            </div>
        </div>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                delete(id: string): Observable&lt;boolean&gt;
            </div>
            <div class="p-6">
                Delete the message on the server.
            </div>
        </div>
        <div class="bg-card rounded shadow mt-4">
            <div class="px-6 py-3 font-mono text-secondary border-b">
                markAllAsRead(): Observable&lt;boolean&gt;
            </div>
            <div class="p-6">
                Mark all messages as read.
            </div>
        </div>

    </div>

</div>
